<template>
	<view class="content">
		<view class="list-wraper">
			<view class="tit"><text>订单编号：</text></view>
			<view class="input-all">{{ data.orderId }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>公司名称：</text></view>
			<view class="input-all">{{ data.clientName }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>公司简称：</text></view>
			<view class="input-all">{{ data.companyCode }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>面料名称：</text></view>
			<view class="input-all">{{ data.mlmcName }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>面料宽幅：</text></view>
			<view class="input-all">{{ data.mlkfName }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>转印温度：</text></view>
			<view class="input-all">{{ data.zywd }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>转印速度：</text></view>
			<view class="input-all">{{ data.zysd }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>面料来源：</text></view>
			<view class="input-all" v-if="data.fabricSource === 1">客户提供</view>
			<view class="input-all" v-if="data.fabricSource === 2">公司自有</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>订单总量：</text></view>
			<view class="input-all">{{ data.totalNumber }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>已交付数量：</text></view>
			<view class="input-all">{{ data.completedNumber }}</view>
		</view>
		<view class="list-wraper" v-if="data.status != 3">
			<view class="tit"><text>本次发货量：</text></view>
			<view class="input-all">{{ data.number }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>设计人员：</text></view>
			<view class="input-all">{{ data.persionName }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>转印人员：</text></view>
			<view class="input-all">{{ data.userName }}</view>
		</view>
		<view class="list-wraper">
			<view class="tit"><text>交货日期：</text></view>
			<view class="input-all">{{ data.receiptTime }}</view>
		</view>
		<view class="tips ind-wraper">
			<view class="type-title"><text>订单花型信息：</text></view>
			<view class="type-list-wraper" v-for="(item, index) in imgDetail" :key="item.id">
				<view class="img">
					<u-image
						:src="$http.baseUrl + item.imgPath"
						:lazy-load="true"
						@error="imageError"
						width="120rpx"
						height="120rpx"
						@click="showPhoto($http.baseUrl + item.imgPath)"
					>
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
				<view class="text">
					<view class="inpt">花型名称：{{ item.fileName }}</view>
					<view class="inpt">订单总量：{{ item.totalNumber != null ? item.totalNumber : 0 }}</view>
					<view class="inpt">交付数量：{{ item.completedNumber != null ? item.completedNumber : 0 }}</view>
					<view class="inpt" v-if="data.status != 3">发货数量：{{ item.number != null ? item.number : 0 }}</view>
				</view>
			</view>
		</view>
		<view class="list-wraper" v-if="data.status === 2">
			<view class="tit"><text>已全部完成：</text></view>
			<view class="input-all">
				<radio-group @change="radioChange">
					<label class="radio">
						<radio name="orderType" value="1" checked="true" />
						否
					</label>
					<label class="radio">
						<radio name="orderType" value="2" />
						是
					</label>
				</radio-group>
			</view>
		</view>
		<view class="list-wraper2">
			<view class="type-title"><text>收货信息：</text></view>
			<view v-if="data.status == 1">
				<radio-group @change="shRadioChange">
					<label v-for="(item, index) in data.address" :key="index">
						<u-row gutter="16">
							<u-col span="1"><radio name="address" :value="item.addressId + ''" /></u-col>
							<u-col span="11">
								<view class="list-wraper">
									<view class="tit"><text>姓名：</text></view>
									<view class="input-all">{{ item.name }}</view>
								</view>
								<view class="list-wraper">
									<view class="tit"><text>电话：</text></view>
									<view class="input-all">{{ item.phone }}</view>
								</view>
								<view class="list-wraper">
									<view class="tit"><text>地址：</text></view>
									<view class="input-all">{{ item.receivingAddress }}</view>
								</view>
							</u-col>
						</u-row>
					</label>
				</radio-group>
			</view>
			<view v-else>
				<view class="list-wraper">
					<view class="tit"><text>客户名称：</text></view>
					<view class="input-all">{{ data.name }}</view>
				</view>
				<view class="list-wraper">
					<view class="tit"><text>客户电话：</text></view>
					<view class="input-all">{{ data.phone }}</view>
				</view>
				<view class="list-wraper">
					<view class="tit"><text>收货地址：</text></view>
					<view class="input-all">{{ data.receivingAddress }}</view>
				</view>
			</view>
		</view>
		<view v-if="data.status === 1">
			<u-upload :custom-btn="true" ref="uUpload2" max-count="1" :form-data="shFormData" :action="shAction" :auto-upload="false" @on-list-change="onListChange">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<view><u-icon name="photo" size="60" color="#2979ff"></u-icon></view>
					<view>发货单</view>
				</view>
			</u-upload>
		</view>
		<view v-if="data.status === 2">
			<u-upload :custom-btn="true" ref="uUpload" max-count="1" :form-data="formData" :action="action" :auto-upload="false" @on-list-change="onListChange">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<view><u-icon name="photo" size="60" color="#2979ff"></u-icon></view>
					<view>收货单</view>
				</view>
			</u-upload>
		</view>
		<view class="btn-box u-text-center">
			<view v-if="data.status === 1"><u-button type="primary" size="medium" @click="submitFh">发货</u-button></view>
			<view v-else-if="data.status === 2"><u-button type="primary" size="medium" @click="submitSh">确认收货</u-button></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			data: {},
			imgDetail: [],
			deptId: uni.getStorageSync('deptId'),
			userId: uni.getStorageSync('userId'),
			thisIndex: 0,
			userList: [],
			selUser: '',
			orderId: '',
			formData: {},
			shFormData: {},
			orderType: 1,
			action: this.$http.apiUrl + '/rest/saveOrder',
			shAction: this.$http.apiUrl + '/rest/updateFhOrderStatus',
			photoLength: 0,
			addressId: ''
		};
	},
	onLoad: function(option) {
		this.id = option.id;
		this.getData();
	},
	methods: {
		getData() {
			this.$http
				.post('/rest/getFhOrderDetail', {
					id: this.id
				})
				.then(res => {
					if (res.data.code == '0') {
						this.data = res.data.data;
						this.imgDetail = res.data.data.imgDetail;
						this.orderId = res.data.data.orderId;
						this.formData = {
							orderId: this.data.orderId,
							id: this.id,
							totalNumber: this.data.totalNumber,
							orderType: this.orderType
						};
					}
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				});
		},
		showPhoto(url) {
			// 预览图片
			var imgArr = [];
			imgArr.push(url);
			//预览图片
			uni.previewImage({
				urls: imgArr,
				current: imgArr[0]
			});
		},
		radioChange(e) {
			this.orderType = e.detail.value;
			this.formData = {
				orderId: this.data.orderId,
				id: this.id,
				totalNumber: this.data.totalNumber,
				orderType: this.orderType
			};
		},
		shRadioChange: function(e) {
			this.addressId = e.detail.value;
			this.shFormData = {
				id: this.id,
				userId: this.userId,
				addressId: this.addressId
			};
		},
		imageError(e) {
			console.error(e.detail.errMsg);
		},
		onListChange(lists) {
			this.photoLength = lists.length;
		},
		submitData(url, param) {
			this.$http.post(url, param).then(res => {
				console.log(JSON.stringify(res));
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.data.code == '0') {
					uni.showModal({
						title: '提示',
						content: res.data.msg + '，点击确定关闭页面',
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									success: () => {
										let pages = getCurrentPages(); // 当前页面
										let beforePage = pages[pages.length - 2]; // 前一个页面
										if (beforePage == undefined || beforePage == null) {
											beforePage.getData(); //执行上个页面的方法
										}
									}
								});
							} else if (res.cancel) {
							}
						}
					});
				}
			});
		},

		submitSh() {
			if (this.photoLength < 1) {
				uni.showToast({
					title: '请上传确认收货单图片',
					icon: 'none',
					duration: 3000
				});
				return false;
			}
			uni.showToast({
				title: '数据上传中',
				icon: 'none',
				duration: 3000
			});
			this.$refs.uUpload.upload();
			uni.navigateBack({
				success: () => {
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2]; // 前一个页面
					if (beforePage == undefined || beforePage == null) {
						beforePage.getData(); //执行上个页面的方法
					}
				}
			});
		},
		submitFh() {
			if (!this.addressId) {
				uni.showToast({
					title: '请选择收货地址',
					icon: 'none',
					duration: 3000
				});
				return false;
			}
			if (this.photoLength < 1) {
				uni.showToast({
					title: '请上传确认发货单图片',
					icon: 'none',
					duration: 3000
				});
				return false;
			}
			let content = '是否确定发货?';
			var that = this;
			uni.showModal({
				title: '提示',
				content: content,
				success: function(res) {
					if (res.confirm) {
						uni.showToast({
							title: '数据上传中',
							icon: 'none',
							duration: 3000
						});
						that.$refs.uUpload2.upload();
						uni.navigateBack();
					} else if (res.cancel) {
						return false;
					}
				}
			});
		}
	}
};
</script>
<style>
page {
	background: #f5f5f5;
	width: 100%;
	height: 100%;
}
.h-20upx {
	height: 20upx;
	display: flex;
}
.tips {
	display: flex;
	width: 100%;
	padding: 20upx 30upx;
	background-color: #ffffff;
}
.type-title {
	width: 94%;
	font-size: 28upx;
	height: 60upx;
	color: #2979ff;
}
.tips_right {
	width: 5%;
}
.tips_right image {
	width: 40upx;
	height: 40upx;
}
.input-logo {
	width: 120upx;
	height: 120upx;
	line-height: 120upx;
	text-align: center;
	font-size: 27upx;
	color: #444444;
}
.input-logo image {
	width: 120upx;
	height: 120upx;
}
.input-Image {
	width: 420upx;
	height: 320upx;
	line-height: 320upx;
	text-align: center;
	font-size: 27upx;
	border: 1upx #cccccc solid;
	color: #444444;
}
.input-Image image {
	width: 420upx;
	height: 320upx;
}
.radio {
	font-size: 28upx;
	transform: scale(0.7);
}
.uni-list-cell {
	justify-content: flex-start;
}
</style>
<style lang="scss" scoped>
.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding-left: 30rpx;
}
.slot-btn {
	width: 140rpx;
	height: 140rpx;
	margin: 20rpx;
	padding-top: 20rpx;
	text-align: center;
	justify-content: center;
	align-items: center;
	background:#FFFFFF;
	border: 1rpx solid $u-type-primary-disabled;
	border-radius: 10rpx;
	font-size: 20rpx;
}
.slot-btn__hover {
	background-color: $u-type-primary-light;
}
</style>
<style scoped lang="stylus" ref="stylesheet/stylus">
.content
	width 100%
	display flex
	flex-direction column
	color #333333
	.list-wraper
		position relative
		display flex
		align-items center
		width 100%
		padding 20upx 30upx
		background #FFFFFF
		.tit
			flex 1.5
			text
				font-size 28upx
		.input-all
			flex 4
			.inpt
				// background red
				padding-top 6upx
				font-size 28upx
	.list-wraper2
		align-items center
		width 100%
		padding 20upx 30upx
		background #FFFFFF
		.tit
			flex 1.5
			text
				font-size 28upx

		.input-all
			flex 4
			.inpt
				// background red
				padding-top 6upx
				font-size 28upx
	.type-list-wraper
		position relative
		display flex
		align-items center
		width 100%
		padding 20upx 30upx
		background #FFFFFF
		border-bottom 1rpx #CCCCCC solid
		.img
			flex 2
			text
				font-size 28upx
		.text
			flex 5
			.inpt
				// background red
				padding-top 6upx
				font-size 28upx
	.logo-wraper
		.input-all
			text-align right
			image
				width 100upx
				height 100upx

	.list-wraper::after
		position absolute
		content ""
		width calc(100% - 60upx)
		height 2upx
		left 30upx
		bottom 0
		background #CCCCCC
	.ind-wraper
		flex-direction column
		justify-content left
		.tit
			width 100%
		.input-lg
			width 100%
			padding 20upx 10upx
			// background red
			.lg-text
				font-size 24upx
				color #777777
	.btn-box
		width 100%;
		padding 40upx 30upx
</style>
